<template>
  <a-modal
    v-model:visible="modalVisible"
    :width="1000"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="false"
  >
    <template #title> 预览PDF </template>
    <div id="printMe" style="padding: 20px">
      <a-row class="printMe-top">
        <a-col :span="8">
          <div class="top a">
            <div>
              <span>订单号：{{ props.orderInfo.number }}</span>
              <span>创建时间: {{ 333333333333 }}</span>
              <span>下达人: {{ props.orderInfo.salesmanName }}</span>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="top b">
            <p>销售需求</p>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="top c"> </div>
        </a-col>
      </a-row>
      <a-divider />
      <a-row class="printMe-cn">
        <a-col :span="8">
          <div class="text">
            <span>供应商编号：{{ 11111111111111 }}</span>
            <span>
              联系人:
              {{ 11111111111111 }}
            </span>
            <span> 联系邮箱: {{}} </span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="text">
            <span>
              供应商名称：
              {{ props.orderInfo.supplierName }}
            </span>
            <span>
              联系电话:
              {{ 11111111111111 }}
            </span>
            <span>联系地址: {{ 11111111111111 }}</span>
          </div>
        </a-col>
      </a-row>
      <div class="tableBox">
        <div class="tableBox-title"><span>产品明细</span></div>
        <a-table
          :bordered="{
            wrapper: true,
            cell: true,
            headerCell: true,
            bodyCell: true,
          }"
          :pagination="false"
          :data="props.orderInfo.product"
        >
          <template #columns>
            <a-table-column
              :width="80"
              title="产品名称"
              align="center"
              data-index="name"
            >
            </a-table-column>
            <a-table-column
              :width="80"
              title="产品型号"
              align="center"
              data-index="spec"
            >
            </a-table-column>
            <a-table-column
              :width="80"
              title="产品编码"
              data-index="number"
              align="center"
            >
            </a-table-column>
            <a-table-column
              :width="80"
              title="产品类型"
              data-index="materialName"
              align="center"
            >
            </a-table-column>
            <a-table-column :width="80" title="产品数量" align="center"
              ><template #cell="{ record }">
                {{ record.amount }} / {{ record.basicName }}
              </template>
            </a-table-column>
            <!-- <a-table-column :width="80" title="预算单价" align="center"
              ><template #cell="{ record }">
                {{ $ }} {{ record.guidePrice }}
              </template>
            </a-table-column> -->
            <a-table-column :width="80" title="预算总价" align="center"
              ><template #cell="{ record }">
                {{ record.amount }}
              </template>
            </a-table-column>
          </template> </a-table
        ><div style="margin-top: 10px"
          >总金额：{{ props.orderInfo.totalPrice }}</div
        ></div
      >
      <a-divider />
      <a-row class="printMe-cn">
        <a-col :span="8">
          <div class="footer-text">
            <span>甲方：</span>
            <span> 乙方: </span>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="footer-text">
            <span> 时间： </span>
            <span> 时间: </span>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { GetRouters } from '@/api/menu';
  import { postBarcodeAdd } from '@/api/barcode';

  const props = withDefaults(
    defineProps<{
      visible: boolean;
      orderInfo: any;
    }>(),
    {
      visible: false,
    }
  );
  const emit = defineEmits(['update:visible']);
  const selectVisible = ref(false);
  const form = reactive({
    list: {
      number: undefined,
      orderTime: undefined,
      supplierName: '',
      basicUnitId: undefined,
      productId: undefined,
      productNumber: '',
      format: 1,
      type: 1,
      module: 2,
      manufactureDate: '',
      manufactureDateState: undefined,
      codeAmount: undefined,
      amount: undefined,
      productName: undefined,
      spec: '',
      basicName: '',
      maxAmount: undefined,
    },
  });
  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const rules = reactive({});
  const recordData = ref([]);

  // 确定
  const handleOk = () => {};

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }

  .printMe-top {
    // display: flex;
    // align-items: center;
    margin-bottom: 20px;
    .top {
      display: flex;
      p {
        margin: 0;
        padding: 0;
        font-size: 20px;
      }
    }
    .a {
      flex-direction: column;
      align-items: start;
      div {
        display: flex;
        flex-direction: column;
        // margin-top: 20px;
        span {
          margin-top: 10px;
        }
      }
    }
    .b {
      justify-content: center;
    }
    .c {
      justify-content: end;
    }
    .printMe-cn {
      margin-bottom: 20px;
    }
  }
  .footer-text {
    display: flex;
    flex-direction: column;
    span {
      margin-bottom: 50px;
    }
  }

  .text {
    display: flex;
    flex-direction: column;
    span {
      margin-bottom: 10px;
    }
  }

  .tableBox {
    margin-top: 20px;
    &-title {
      width: 100%;
      height: 56px;
      background-color: rgba(245, 247, 250, 1);
      text-align: center;
      line-height: 56px;
    }
  }
</style>
